<template>
	<view class="topContainers_dailog">
		<view class="topContainers_containers">
			<view class="topContainers_containers_content">
				<view class="topContainers_containers_content_btn" @tap="closed" style="cursor: pointer;">
				   x
				</view>
				<view class="topContainers_containers_content_topLine display_flex">
					<view class="topContainers_containers_content_topLine_item" style="cursor: pointer;" v-for="(item,index) in topLineArr" :key="index" @tap="goToLine(item)">
						<image :src="item.url" class="topContainers_containers_content_topLine_item_img"></image>
					   <!-- {{item.url}} -->
					</view>
				</view>
				<view class="topContainers_containers_content_itemContainers">
					<view class="topContainers_containers_content_itemContainers_item" style="cursor: pointer;" v-for="(item,index) in itemContainersArr" :key="index" @tap="goToEvent(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'topDailog',
		components:{
			
		},
		props: {
			
		},
		data() {
			return {
				topLineArr:[
					{
						url:'/static/weiBo.png',
						name:'微博'
					},
					{
						url:'/static/weiXin.png',
						name:'微信'
					},
					
				],
				itemContainersArr:[
					// {
					// 	id:1,
					// 	name:"NEWS"
					// },
					{
						id:2,
						name:"演出介绍"//"LIVE INFO"
					},
					{
						id:3,
						name:"艺人介绍"//"ARTISTS"
					},
					{
						id:4,
						name:"演出曲目"//"SETLIST"
					},
					{
						id:5,
						name:"周边产品"//"GOODS"
					},
					// {
					// 	id:6,
					// 	name:"OUTSIDE"
					// },
					{
						id:7,
						name:"演出须知"//"NOTICE"
					},{
						id:8,
						name:"购票指南"//"TICKETS"
					},
					// {
					// 	id:9,
					// 	name:"SUPPORTERS"
					// },
					{
						id:10,
						name:"主页"//"HOME"
					}
				]
			};
		},
		mounted() {
			
			// #ifdef H5
			
			// #endif
		},
		methods:{
			goToLine(item){
				if(item.name=="微博"){
					window.open('https://weibo.com/u/7892807589','_black')
				}else if(item.name=="微信"){//https://mp.weixin.qq.com/s/feDgwgDo0u9Bd1-bLJL-aQ
					window.open('https://mp.weixin.qq.com/s/feDgwgDo0u9Bd1-bLJL-aQ','_black')
				}
			},
			//https://weibo.com/u/7892807589
			goToEvent(item){
				if(item.id==1){//新闻
					uni.navigateTo({
						url: '/pages/news/index'
					});
				}else if(item.id==2){//演唱会详情
					uni.navigateTo({
						url: '/pages/liveInfo/index'
					});
				}else if(item.id==3){//演员
					uni.navigateTo({
						url: '/pages/artists/index'
					});
				}else if(item.id==4){//pages/setlist  节目单
					uni.navigateTo({
						url: '/pages/setlist/index'
					});
				}else if(item.id==5){//pages/setlist  周边商品
					uni.navigateTo({
						url: '/pages/goods/index'
					});
				}else if(item.id==7){//pages/notice  公告
					uni.navigateTo({
						url: '/pages/notice/index'
					});
				}else if(item.id==8){//pages/tickets  票务中心
					uni.navigateTo({
						url: '/pages/tickets/index'
					});
				}else if(item.id==9){//pages/supporters  赞助商
					uni.navigateTo({
						url: '/pages/supporters/index'
					});
				}else if(item.id==10){
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
				this.$emit('closed')
			},
			closed(){
				this.$emit('closed')
			}
		}
	};
</script>

<style scoped lang="scss">
	.topContainers_dailog{
		position: fixed;
		top:0rpx;
		left:50%;
		background: rgba(0,0,0,0.8);
		z-index:3;
		width:100%;
		transform: translateX(-50%);
		max-width: 960px;
		height:100vh;
		color:#fff;
		.topContainers_containers{
			position: relative;
			width:100%;
			height:100%;
			&_content{
				width:100%;
				heigt:100%;
				overflow-y: auto;
				padding:0 32rpx;
				padding-top:120rpx;
				&_btn{
					position: absolute;
					right:20rpx;
					top:20rpx;
					width:80rpx;
					height:80rpx;
					background:rgba(234, 11, 42, 1);
					line-height: 80rpx;
					text-align: center;
					color:#fff;
					font-size:48rpx;
					
					border-radius: 16rpx;
				}
				&_topLine{
					margin-top:40rpx;
					&_item{
						width:64rpx;
						height:64rpx;
						margin-right:64rpx;
						&_img{
							width:64rpx;
							height:64rpx;
						}
					}
				}
				&_itemContainers{
					&_item{
						margin-top:32rpx;
						font-size:48rpx;
						line-height:60rpx;
						padding-bottom:8rpx;
						border-bottom: 1px solid #fff;
					}
				}
			}
		}
	}
</style>